import React from 'react';
import {Avatar, Tooltip} from "antd";
import styles from '../../index.less';
import classNames from 'classnames';

export interface AvatarInfoProps {
  [propName: string]: any;
}

const AvatarInfo: React.FC<AvatarInfoProps> = (props) => {

  const {customerInfo = {}} = props;

  const borderClassName = classNames({
    [styles.avatar]: true,
    [styles.goldBg]: true,
    [styles.silverBg]: true,
    [styles.loBg]: true,
  });

  return (
    <div>
      <span className={borderClassName}>
      <Avatar className={styles.avaImg} src={customerInfo.avatar}/>
      </span>
      <div className={styles.name}>
        <div>
          <span>{customerInfo.name}</span>
          {customerInfo.gender === 'M' ? (
            <span className={`${styles.sex} ${styles.male}`}>
                    <Tooltip title="Male" placement="top" overlayStyle={{fontSize: '12px'}}>
                      <i className="iconfont rws-man"/>
                    </Tooltip>
                  </span>
          ) : (
            <span className={`${styles.sex} ${styles.female}`}>
                    <Tooltip title="Female" placement="top" overlayStyle={{fontSize: '12px'}}>
                      <i className="iconfont rws-women"/>
                    </Tooltip>
                  </span>
          )}
        </div>
      </div>
      <div className={styles.cnName}>
        {customerInfo.chineseName
          ? customerInfo.chineseName + (customerInfo.gender === 'M' ? '先生' : '女士')
          : ''}
      </div>
    </div>
  );
};

export default AvatarInfo;
